<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>Locate definition</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta name="generator" content="RoboHelp by eHelp Corporation www.ehelp.com">
<link rel="stylesheet" href="interakt_new_ns.css" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
if (navigator.appName !="Netscape")
{   document.write("<link rel='stylesheet' href='interakt_new.css'>");}
//-->
</script>
<style type="text/css">
<!--
div.whs1 { width:100%; }
p.whs2 { text-align:right; }
img_whs3 { border:none; width:40px; height:50px; float:none; }
table.whs4 { width:100%; }
td.whs5 {  }
hr.whs6 { float:aligncenter; }
img_whs7 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:675px; height:415px; float:none; }
img_whs8 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:281px; height:339px; float:none; }
img_whs9 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:463px; height:123px; float:none; }
-->
</style>

<script type="text/javascript" language="JavaScript">
<!--
function reDo() {
  if (innerWidth != origWidth || innerHeight != origHeight)
     location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
        origWidth = innerWidth;
        origHeight = innerHeight;
        onresize = reDo;
}
onerror = null; 
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style>

<script type="text/javascript" language="javascript1.2" src="whtopic.js">
</script>
<script type="text/javascript" language="javascript1.2" src="whutils.js">
</script>
<script type="text/javascript" language="javascript" src="whver.js">
</script>
<script type="text/javascript" language="javascript1.2">
<!--
    var linkedScrollbarStyle = "<link rel='stylesheet' href='wf_topics.css'>";
    if( (!isTopicOnly()) &&(parent.gbFHPureHtml == null) )
    {
        document.write(linkedScrollbarStyle);
    }
    //-->
</script>
</head>
<body>
<script type="text/javascript" language="javascript1.2">
<!--
if (window.addTocInfo)
{
addTocInfo("Using JSEclipse\nNavigating in JavaScript projects\nLocate definition");
addAvenueInfo("Using JSEclipse","3210_functionoutline.htm","3300_jserrordebug.htm");

  addShowButton();
}
if (window.setRelStartPage)
{
setRelStartPage("jseclipse.htm");

        sendTopicLoaded();
        autoSync(1);
        sendSyncInfo();
        sendAveInfo();
        sendBgColorInfo();
}
//-->
</script>
<div id="header" class="whs1">
<p align="right" class="whs2"><img src="images/adobe_logo.png" width="40px" height="50px" border="0" class="img_whs3" alt=""></p>
<table width="100%" class="whs4">
<tr>
<td colspan="3" valign="top" class="whs5">&#160;<br>
&#160;<br>
<hr class="whs6"></td>
</tr>
</table>
</div>
<h1>Locate definition</h1>
<p>Not rarely when developing a larger project using <span class="Labels">JavaScript</span>, the class definitions are stored in separate files. This is done to keep the code cleaner, and to allow reusing the classes. When creating a new instance of a class and using its methods in a different file, after adding the method name, you can use the <span class="Labels">Open declaration</span> command to load the file containing the class, and display the selected method's definition.</p>
<p>To access the <span class="Labels">Open declaration</span> command, right-click on a function name and notice the certain entry in the contextual menu. Alternatively, with the cursor placed inside the method/function name, press the <span class="UserInput">F3</span> key.</p>
<p>&#160;</p>
<p><span style="font-weight:bold;"><b>Caution</b></span>: In order for <span class="Labels">JavaScript</span> classes to be processed correctly by <span class="Labels">JSEclipse</span>, and for the <span class="Labels">Open Declaration</span> command to work, you must name the file containing the class definition as the class (identical names). Thus, if defining the <span class="Labels">Person</span> class, it will be stored in the <span class="Code">Person.js</span> file. Furthermore, the file where the class's methods are used must be in the same project as the class definition file.</p>
<p>&#160;</p>
<p>As an example, consider that the class <span class="Code">Person</span> is defined in the file <span class="Code">Person.js</span>. It has the following methods: <span class="Code">eat</span>, <span class="Code">sleep</span>, <span class="Code">exercise</span>:<br>
&#160;</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4)) 
{  if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/person_class_definitionv2.png' x-maintain-ratio='TRUE' width='675px' height='415px' border='1' class='img_whs7'>");}
else
{   document.write("<img src='images/person_class_definitionv2.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='675px' height='415px' border='1' class='img_whs7'>");}
//-->
</script></p>
<p>&#160;</p>
<p>In the file <span class="Labels">city.js</span>, you create a new instance of the Person class: <span class="Code">citizen = new Person("name","age");</span></p>
<p>Then, a method will be used - let's say sleep: <span class="Code">citizen.growOlder</span>.</p>
<p>In order to see the actual method definition, right-click the <span class="Code">growOlder</span>text and select <span class="Labels">Open Declaration</span>.</p>
<p>&#160;</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4)) 
{  if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/open_declarationv2.png' x-maintain-ratio='TRUE' width='281px' height='339px' border='1' class='img_whs8'>");}
else
{   document.write("<img src='images/open_declarationv2.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='281px' height='339px' border='1' class='img_whs8'>");}
//-->
</script></p>
<p>&#160;</p>
<p>The <span class="Labels">Person.js</span> file will be opened, and the editor's cursor is placed at the <span class="Code">growOlder</span> method's definition.</p>
<p>If you hit F3 with the mouse cursor over a word with multiple occurrences, all the instances are highlighted. This helps finding for example where a function is used.</p>
<p>&#160;</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4)) 
{  if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/markers.png' x-maintain-ratio='TRUE' width='463px' height='123px' border='1' class='img_whs9'>");}
else
{   document.write("<img src='images/markers.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='463px' height='123px' border='1' class='img_whs9'>");}
//-->
</script></p>
<div id="footer" class="whs1">
<table width="100%" class="whs4">
<tr>
<td colspan="3">
<hr class="whs6"></td>
</tr>
</table>
</div>
</body>
</html>
